<template>
	<view class="page">
		<!-- 地址 、搜索框 -->
		<view class="search-box-wrapper p10">
			<view class="input-box">
				<image class="search-icon" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/export/search.png" />
				<view class="uni-input">搜索</view>
			</view>
		</view>


		<view v-if="hasLogin" v-for="(item,index) in chatPeopleList" :key="index">
			<view class="chat-item" @click="goChat(item)">
				<image class="avatar" :src="item.accountHead" />
				<view class="user-info">
					<view class="name-box">
						<view class="name">{{item.realName}}</view>
						<view v-if="item.identity" class="identity">
							{{item.identity}}
						</view>
					</view>
					<view class="content">
						{{displayLastMsg(item.imMessage.content)}}
					</view>
					<view class="fav-each">
						回关
					</view>
					<!-- <view class="fav">
						互相关注
					</view> -->
				</view>
				<view class="bot-line" />
			</view>
		</view>

		<view v-if="hasLogin===false" class="nodata">
			<image class="img" src="https://www.innovationgloble.com/wxs/img/wx/weidenglu.png" />
			<view class="tip">
				您还没有登录，请登录后查看消息
			</view>
			<view class="btn" @click="goLogin">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		chat_time
	} from '@/utils/time.js';

	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			// 获取历史联系人
			this.get_chat_contact_list();
			//检测登录状态
			this.checkLogin();
		},
		computed: {
			...mapState('chatStore', ['chatPeopleList', 'hasLogin']),
			displayLastMsg() {
				return msg => {
					if (typeof(msg) === 'string') {
						if (msg.indexOf('<img') !== -1) {
							return '图片'
						}
						return msg;
					}
					return '未知类型';
				}
			}
		},
		methods: {
			...mapMutations('chatStore', ['setCurrentPerson', 'setChatLogin']),
			...mapActions('chatStore', ['get_chat_contact_list']),
			goLogin() {
				uni.navigateTo({
					url: '/pagesA/login/login'
				})
			},
			checkLogin() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						//连接 聊天服务
						this.checkConnectWS(userInfo);
						this.setChatLogin(true);
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			checkConnectWS(userInfo) {
				getApp().connectWS(userInfo);
			},
			goChat(item) {
				const chatLogin = getApp().globalData.chatLogin;
				if (chatLogin) {
					this.setCurrentPerson(item);
					uni.navigateTo({
						url: "/pagesA/chat-contactlist/chat"
					})
				}
			},
			chatTime(time) {
				return chat_time(time);
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.search-box-wrapper {
			display: flex;
			flex-direction: row;
			align-items: center;

			.input-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex: 1;
				border-radius: 8upx;
				box-sizing: border-box;
				background-color: #F5F5F5;
				position: relative;
				margin-bottom: 22upx;
				overflow: hidden;
				margin: 20upx 32upx;
				padding: 0 20upx;
				box-sizing: border-box;
				
				.uni-input {
					font-size: 28upx;
					background-color: #F5F5F5;
					color: #A3A3A3;
					height: 75upx;
					
				}
				
				.search-icon {
					width: 32upx;
					height: 32upx;
				}
			}
		}

		.quick-enters {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 31px 15px 23px 15px;
			margin: 0 10px;
			border-bottom: 1px solid #F9F9F9;
			
			.quick-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.quick-item-desc {
				margin-top: 16upx;
				font-size: 24upx;
				color: #CCCCCC;
			}
			
			.quick-item-title {
				margin-top: 20upx;
				font-size: 28upx;
				color: rgba(51,51,51,1);
				font-weight:700;
			}
			
			.quick-item-image {
				width: 98upx;
				height: 98upx;
			}
		}

		.nodata {
			display: flex;
			min-height: 100vh;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			.tip {
				color: #666666;
				font-size: 26upx;
				margin: 30upx 0;
			}

			.img {
				object-fit: contain;
				height: 288upx;
				width: 374upx;
			}

			.btn {
				width: 145upx;
				height: 69upx;
				background: rgba(42, 125, 250, 1);
				border-radius: 4upx;
				text-align: center;
				line-height: 69upx;
				color: #fff;
			}
		}

	}

	.chat-item {
		width: 100%;
		height: 144upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;

		position: relative;
	}

	.user-info {
		.name-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			.name {
				font-size: 30upx;
				color: #444444;
				font-weight: bold;
			}
			.identity{
				margin-left: 10upx;
				font-size: 22upx;
				color: #C99301;
				border: solid 1upx #C99301;
				padding: 1upx 8upx;
				
				
				opacity:0.4;
				border:2upx solid rgba(217,170,39,1);
			}
		}
	}

	

	.fav {
		position: absolute;
		right: 20upx;
		top: 47upx;
		font-size: 26upx;
		color: #A3A3A3;
		text-align: center;
		
		width:136upx;
		height:50upx;
		line-height: 50upx;
		border-radius:25upx;
		border:1upx solid #DDDDDD;
	}
	
	.fav-each {
		position: absolute;
		right: 20upx;
		top: 47upx;
		font-size: 26upx;
		color: #196DEC;
		text-align: center;
		line-height: 50upx;
		width:110upx;
		height:50upx;
		border-radius:25upx;
		border:1upx solid #2A7DFA;
	}
	.bot-line {
		position: absolute;
		bottom: 0;
		height: 2upx;
		background-color: #F5F5F5;
		left: 124upx;
		right: 0upx;
	}

	.content {
		font-size: 26upx;
		color: #888787;
	}

	.avatar {
		width: 84upx;
		height: 84upx;
		border-radius: 50%;
		background-color: #F9F9F9;
		margin-right: 20upx;
	}
</style>
